<template>
  <div class="map-chart-wrap" :style="divHeight"  v-if="show">
    <ScatterChart v-if="show" :chartStyle="chartStyle" domId="scatterChart" ref="mappingRef" :chartData="chartData"/>
  </div>
</template>
<script>
import ScatterChart from "../component/ScatterChart/index.vue"
import reason from '../reason.json'

export default {
  components: {ScatterChart},
  data() {
    return {
      show: false,
      loading: false,
      props: {multiple: true},
      chartStyle: {
        width:'55%'
      },
      divHeight: {
        'min-height':'50vh'
      },
      chartData: {
        op: null,
        title: "主标题",
        model: "产品类型",
        showLegend: true
      },
    }
  },
  methods: {
    getScatterData() {
      this.show = true
      this.chartData.op =reason.data.find(it=>it.algType==='10002').data.op
      console.log(this.chartData)
    },
    onChartResize () {
      this.$nextTick(() => {
        this.$refs.mappingRef?.onChartResize()
      })
    },
  },
  mounted() {
    this.getScatterData()
    window.addEventListener('resize', this.onChartResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onChartResize)
  },
}
</script>
<style>
.map-chart-wrap{
  border: 1px solid red;
  padding-top: 100px;
  position: relative;
  width: 55%;
}
</style>
